<!-- 登录页面 -->
<template>
	<div id="login" class="app">
		<h1 class="heading">移动Mysise</h1>
		<div class="form">
			<mt-field label="学号" placeholder="请输入学号" class="text" v-model="user.value" :disabled="user.isDisabled"></mt-field>
			<mt-field label="密码" placeholder="请输入密码" type="password" class="text" v-model="pass.value" :disabled="pass.isDisabled"></mt-field>
			<mt-switch v-model="isVisitor" @change="change" class="radio">是否使用测试账号</mt-switch>
			<mt-button type="primary" size="large" class="btn" @click.native="loginFn">登录</mt-button>
		</div>
		<!-- 使用flex布局占位的 -->
		<h1> </h1>
		<h1> </h1>
	</div>
</template>

<script>
import Vue from 'vue'
import { Field } from 'mint-ui';
import { Switch } from 'mint-ui';
import { Button } from 'mint-ui';
import { Toast } from 'mint-ui';

Vue.component('mt-button', Button);
Vue.component('mt-switch', Switch);
Vue.component('mt-field', Field);
export default {
	name: 'login',
	data () {
		return {
			user : {
				value : '',
				isDisabled : false
			},
			pass : {
				value : '',
				isDisabled : false
			},
		 	isVisitor : false
		}
	},
	methods : {
		//检测是否游客账号
		change(checked){
			//如果是就消除输入框数据并禁止输入框
			if(!checked) {
				this.$set(this.user, "value", "110")
				this.$set(this.user, "isDisabled", true)
				this.$set(this.pass, "value", "110")
				this.$set(this.pass, "isDisabled", true)
			} else {
				this.$set(this.user, "value", "")
				this.$set(this.user, "isDisabled", false)
				this.$set(this.pass, "value", "")
				this.$set(this.pass, "isDisabled", false)
			}
		},
		// 登录操作
		loginFn(){
			this.$store.dispatch({
				type : 'postData',
				url : 'http://qietu.wenye123.com/test_mysise/curl.php?method=login',
				data : {
					user : this.user.value,
					pass : this.pass.value
				},
				callBack :(data)=>{
					if( data.code==200 && data.msg=='success'){
						//console.log(data)
						//设置登录状态为true
						this.$store.commit({
							type : 'setLoginedFn',
							status : true
						})
						//保存学号和密码
						this.$store.commit({
							type : 'setUserFn',
							user : this.user.value
						})
						this.$store.commit({
							type : 'setPassFn',
							pass : this.pass.value
						})
						//保存mysise cookie
						this.$store.commit({
							type : 'setSiseCookieFn',
							sise_cookie : data.sise_cookie
						})
					
						//提示
						Toast({
							message : '登录成功',
							position : 'bottom',
							duration : 500
						});
						//跳转到首页
						this.$router.push("/");
					} else if (data.code == 404 && data.msg == "failed") {
						//提示
						Toast({
							message : '登录出错，请再次登录',
							position : 'bottom',
							duration : 3000
						});
					}
				}
			});
		}
	}
}
</script>

<style>
	#login {
		color : #fff;
		background: #73c0ae;
		display: flex;
		justify-content : space-around;
		align-items : center;
		flex-direction : column;
	}
	#login .heading	 {
		font-size: 40px;
	}
	#login .form .text {
		color: #73c0ae;
		margin: 10px 0;
		border-radius: 10px;
	}
	#login .form .btn {
		margin: 10px 0;
		border-radius: 10px;
	}
	
</style>